<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link href="../20201102/btn.css" rel="stylesheet">
</head>

<body>
    <div id="app">
        <div class="bbs">
            <header><span @click="postShow=!postShow">我要发帖</span></header>
            <section>
                <ul id="postList">
                    <li v-for="item in bbsList">
                        <div>
                            <img src="../20201102/images/tou01.jpg">
                        </div>
                        <h1>
                            {{item.title}}
                        </h1>
                        <p>
                            <span>{{item.title}}</span>
                            {{item.text}}
                        </p>
                    </li>
                </ul>
            </section>
            <div class="post" id="post" v-show="postShow">
                <input class="title" placeholder="请输入标题（1-50个字符）" id= "title" v-model="title">
                所属版块：<select id="sec" v-model="sec">
                    <option>请选择版块</option>
                    <option>电子书籍</option>
                    <option>新课来了</option>
                    <option>新手报到</option>
                    <option>职业规划</option>
                </select>
                <textarea class="content" id="content" v-model="text"></textarea>
                <input class="btn" value="发布" @click="pulish()">
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data() {
                return {
                    postShow:false,
                    title:"",
                    sec:"请选择版块",
                    text: "",
                    bbsList:[
                        {
                            title:"奥里给",
                            sec:"电子书籍",
                            text:"奥里给干了兄弟们"
                        },
                        {
                            title:"奥里给2",
                            sec:"电子书籍",
                            text:"奥里给干了兄弟们2"
                        }
                    ]
                }
            },
            methods:{
                pulish(){
                    if(this.title != "" && this.sec != "请选择版块" && this.text != ""){
                    this.bbsList.push({title:this.title,sec:this.sec,text:this.text})
                    this.postShow = false;
                    this.title = "";
                    this.sec = "请选择版块",
                    this.text = "";
                    }else{
                        alert("用户必须填写完整信息!")
                    }
                }
            }
        })
    </script>

</body>

</html>
